<template>
  <div class="wraps">
    <div ref="bar" class="bar"></div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";

  let speed  = ref<number>(0)
  let bar = ref<HTMLElement>()
  let timer = ref<number>(0)
  const startLoading = () => {
    let dom = bar.value as HTMLElement
    // console.log('startloading dom:', dom)
    speed.value = 1
    timer.value = window.requestAnimationFrame(function fn() {
      if(speed.value<90){
        speed.value+=2
        dom.style.width = speed.value+'%'

        timer.value = window.requestAnimationFrame(fn)
      }else{
        speed.value = 1
        window.cancelAnimationFrame(timer.value)
      }
    })
  }

  const endLoading = () => {
    let dom = bar.value as HTMLElement
    setTimeout(() => {
      window.requestAnimationFrame(()=>{
        speed.value = 100
        dom.style.width = speed.value+'%'
      })
    },1000)

  }

  defineExpose({
    startLoading,
    endLoading
  })
</script>

<style scoped lang="less">
  .wraps{
    position: fixed;
    top: 0;
    width: 100%;
    height: 1px;
    .bar{
      height: inherit;
      width: 0;
      background: dodgerblue;
    }
  }
</style>